@import "../variables";
#scrollable-detail {
    padding-bottom: 16px;
}

.selectable-block {
    background:url(image/room-status-mid-01.png) no-repeat 50% 0;
    background-size: 32px 40px;
    float: left;
    .vertical-middle-block {
        height: 72px;
        border-radius: 4%;
        cursor: pointer;
        div {
            max-height: 84px;
//          white-space: normal;
//          overflow: hidden;
        }
    }
    &.status-qr {
        background:url(image/room-status-QR-01.png) no-repeat 50% 0;
        background-size: 32px 40px;
    } 
    &.status-qrb {
        background:url(image/room-status-QRB-01.png) no-repeat 50% 0;
        background-size: 32px 40px;
    } 
    &.status-rf {
        background:url(image/room-status-RF-01.png) no-repeat 50% 0;
        background-size: 32px 40px;
    } 
    &.selected {
        background:url(image/room-status-mid-02.png) no-repeat 50% 0;
        background-size: 32px 40px;
        &.status-qr {
            background:url(image/room-status-QR-02.png) no-repeat 50% 0;
            background-size: 32px 40px;
        } 
        &.status-qrb {
            background:url(image/room-status-QRB-02.png) no-repeat 50% 0;
            background-size: 32px 40px;
        } 
        &.status-rf {
            background:url(image/room-status-RF-02.png) no-repeat 50% 0;
            background-size: 32px 40px;
        } 
    }
    &.disabled {
        background:url(image/room-status-mid-03.png) no-repeat 50% 0;
        background-size: 32px 40px;
        &.status-qr {
            background:url(image/room-status-QR-03.png) no-repeat 50% 0;
            background-size: 32px 40px;
        } 
        &.status-qrb {
            background:url(image/room-status-QRB-03.png) no-repeat 50% 0;
            background-size: 32px 40px;
        } 
        &.status-rf {
            background:url(image/room-status-RF-03.png) no-repeat 50% 0;
            background-size: 32px 40px;
        } 
    }
    &.dirty {
        background:url(image/room-status-mid-04.png) no-repeat 50% 0;
        background-size: 32px 40px;
        &.status-qr {
            background:url(image/room-status-QR-04.png) no-repeat 50% 0;
            background-size: 32px 40px;
        } 
        &.status-qrb {
            background:url(image/room-status-QRB-04.png) no-repeat 50% 0;
            background-size: 32px 40px;
        } 
        &.status-rf {
            background:url(image/room-status-RF-04.png) no-repeat 50% 0;
            background-size: 32px 40px;
        } 
    }    
}
#doc{
    background:#fafafa;
}
.content-outside-title{
    line-height: 38px;
    padding: 0 16px;
}
.horizontal-padding{
    padding: 0;
}
.checkbox-box-room{
    line-height: 36px;
    height: 36px;
    width: 100%;
    background-color:#D8D8D8;
}
.checkbox-box-room li{
    list-style: none;
    float: left;
    height: 28px;
    padding-left: 24px;
    font-size: 14px;
    padding-right: 8px;
}
.checkbox-box-room li:nth-of-type(1){
    margin-left: 16px;
    background:url(image/room-status-01.png) no-repeat 0 8px;
    background-size: 15px 18px;
}
.checkbox-box-room li:nth-of-type(2){
    background:url(image/room-status-02.png) no-repeat 0 8px;
    background-size: 15px 18px;
}
.checkbox-box-room li:nth-of-type(3){
    background:url(image/room-status-03.png) no-repeat 0 8px;
    background-size: 15px 18px;
}
.checkbox-box-room li:nth-of-type(4){
    background:url(image/room-status-04.png) no-repeat 0 8px;
    background-size: 15px 18px;
}
#scrollable-detail .col-xs-2{
    padding: 0;
//  width: 26px;
//  margin-left:13px ;
}
.vertical-padding{
   padding: 20px 0 0 0;  
}
.vertical-middle-block-cell{
    margin-top: 25px;
    text-align: center;
    display: block;
    font-size: 12px;
}
.content-panel{
    border: none;
    background: #F5F5F5;
}
.room-booking-style{
    padding:16px;
}
.btn-primary.btn-raised{
    background-color: #cb8600;
}
.vertical-middle-block:before{
    height: auto;
}
.vertical-middle-block{
    white-space: normal;
}
.content-outside-title {
    background: #fff;
}
.row{
    height: 59px;
    line-height: 59px;
    padding:0 16px;
    background: #fff;
    width: auto;
}
#header .navbar {
    width: 56px;
}
#header .navbar-icon{
    background: #000;
    filter: alpha(opacity=50);
    -moz-opacity: .5;
    -khtml-opacity: .5;
    opacity: .5;
    margin-right: 10px;
    margin-top: 10px;
    height: 45px;
    width: 45px;
    position: relative;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.gohome-right {
    background: url(image/gohome.png) no-repeat;
    display: block;
    width: 26px;
    height: 22px;
    -webkit-background-size: 26px 22px;
    background-size: 26px 22px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -12px 0 0 -13px;
}
.cardStyle{
    font-size: 10px;
    color: #333333;
}

.charityPrice-content{
    color: #cb8600;
    font-size:12px ;
    margin-left: 8px;
}

#doc-header{
    top:auto;
    background:#fff;
    opacity: 1;
    bottom:0;
    .lock{
        height: 30px;
        line-height: 30px;
        padding: 0 16px;
        padding-left: 40px;
    }
    .qrblock{
        background: url(image/room-QRB-02.png) 16px center no-repeat;
        background-size: 15px 18px;
    }
    .qrlock{
        background: url(image/room-QR-02.png) 16px center no-repeat;
        background-size: 15px 18px;
    }    
    .rfblock{
        background: url(image/room-status-RF-02.png) 16px center no-repeat;
        background-size: 15px 18px;
    }
}
#insertBefore+div{
    margin-top: 10px;
}
.room-booking-wrong{
    background: #fff;
    padding: 16px 16px 30px;
    text-align: center;
    .first-tip{
        font-size: 16px;
        margin-bottom: 10px;
    }
    .second-tip{
        color: #666;
        word-break: normal;
    }
}
@media (max-width: 360px) {
    #doc-header{
        .lock{
            font-size: 12px;
        }  
    }          
} 
@media (max-width: 320px) {
    #doc-header{
        .lock{
            font-size: 12px;
        }  
    }          
}  